<template>
  <div class="nav">
    <!-- <div class="title">配置设备</div> -->
    <div class="forms">
      <div class="item">
        <div class="lbe">
          语言
        </div>
        <div class="sel">
          <el-select v-model="value12" placeholder="请选择语言">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @change="change1"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          时区
        </div>
        <div class="sel">
          <el-select v-model="value13" placeholder="请选择时区">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          日期格式
        </div>
        <div class="sel">
          <el-select v-model="value14" placeholder="请选择日期格式">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          系统日期
        </div>
        <div class="sel">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择系统日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          系统时间
        </div>
        <div class="sel">
          <el-time-select
            v-model="value2"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择系统时间"
          >
          </el-time-select>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          VGA/HDMI分辨率
        </div>
        <div class="sel">
          <el-select v-model="value15" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          鼠标指针移动速度
        </div>
        <div class="sel">
          <div class="slider-content">
            <span class="slider-text">慢</span>
            <div class="slider">
              <el-slider v-model="iPTZSpeed" :max="100" :min="1"></el-slider>
            </div>
            <span class="slider-text">快</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          操作密码
        </div>
        <div class="sel">
          <el-switch
            v-model="value3"
            active-color="#3b3b3b"
            inactive-color="#817f8b"
          >
          </el-switch>
        </div>
      </div>
      <div class="item">
        <div class="lbe">
          开机向导
        </div>
        <div class="sel">
          <el-switch
            v-model="value4"
            active-color="#3b3b3b"
            inactive-color="#817f8b"
          >
          </el-switch>
        </div>
      </div>
      <div class="item">
        <div class="sel sel1">
          <el-button type="primary" :plain="false" @click="open4"
            >应用</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Configure",
  data: () => ({
    loading:false,
    value1: "",
    value2: "",
    value15: "",
    value12: "",
    value13: "",
    value14: "",
    iPTZSpeed: 0,
    value3: false,
    value4: false,
    options: [
      {
        value: "选项1",
        label: "简体中文",
      },
      {
        value: "选项2",
        label: "繁体中文",
      },
    ],
    options1: [
      {
        value: "选项1",
        label: "(UTC+08:00)北京，重庆，香港特别行政区，乌鲁木齐",
      },
      {
        value: "选项2",
        label: "(UTC+08:00)吉隆坡，新加坡",
      },
      {
        value: "选项3",
        label: "(UTC+08:00)珀斯",
      },
      {
        value: "选项4",
        label: "(UTC+08:00)台北",
      },
      {
        value: "选项5",
        label: "(UTC+08:00)乌兰巴托",
      },
      {
        value: "选项6",
        label: "(UTC+07:00)新西伯利亚",
      },
    ],
    options2: [
      {
        value: "选项1",
        label: "年月日",
      },
      {
        value: "选项2",
        label: " 年月日时分",
      },
      {
        value: "选项3",
        label: "年月日时分秒",
      },
    ],
    options3: [
      {
        value: "选项1",
        label: "1680×1050",
      },
      {
        value: "选项2",
        label: "1920×1080",
      },
    ],
  }),
  methods: {
    open4() {
      // this.loading=true
        const loading = this.$loading({
          lock: true,
          text: '正在应用中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.$message.error("应用失败，请重新应用！")
        }, 3000);
    },
    change1(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped lang="less">
.nav {
  width: 100%;
  height: calc(100vh - 0.8rem);
  background-color: #313039;
  display: flex;
  align-items: center;
  word-wrap: normal;
  flex-wrap: wrap;
  justify-content: center;
  .title {
    width: 100%;
    text-align: center;
    font-size: 0.28rem;
    font-weight: 600;
    color: #fff;
  }
  .forms {
    margin: 0 auto;
    .item {
      display: flex;
      height: 0.75rem;
      align-items: center;

      .lbe {
        text-align: right;
        width: 1.8rem;
        font-size: 0.2rem;
        line-height: 0.75rem;
        padding-right: 0.4rem;
        color: #fff;
      }
      .sel1 {
        display: flex;
        justify-content: center;
      }
      .sel {
        .slider-content {
          width: 100%;
          height: 0.2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0.2rem 0;

          .slider {
            width: 2rem;
            margin: 0 0.15rem;
          }

          .slider-text {
            font-size: 0.18rem;
            color: #817f8b;
          }

          /deep/ .el-slider__button {
            background: #817f8b;
            border: none;
          }

          /deep/ .el-slider__bar {
            background: #817f8b;
          }

          /deep/ .el-slider__runway {
            background: #3b3b3b;
          }
        }
        flex: 1;
        /deep/.el-select {
          width: 100%;
        }
        /deep/.el-date-editor {
          width: 100%;
        }
        /deep/.el-button {
          margin-left: 1.1rem;
          width: 50%;
        }

        /deep/.el-input__inner {
          background-color: transparent;
          color: #fff;
          font-size: 0.16rem;
          border: 2px solid rgba(255, 255, 255, 0.2);

          &:focus,
          &:hover {
            border: 2px solid rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
}
</style>
